<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: start;
            min-height: 100vh;
            margin: 0;
            padding-top: 50px;
            background-color: #f0f0f0;
        }

        h1 {
            margin-bottom: 20px;
        }

        .game-container {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 5px;
            margin-bottom: 20px;
        }

        .cell {
            width: 100px;
            height: 100px;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            cursor: pointer;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: background-color 0.3s;
        }

        .cell:hover {
            background-color: #f8f8f8;
        }

        .status {
            margin-bottom: 10px;
            font-size: 18px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>Tic Tac Toe</h1>
    <div class="status" id="status">Current player: X</div>
    <div class="game-container" id="gameBoard"></div>
    <button onclick="resetGame()">Restart Game</button>

    <script>
        let board = [];
        let currentPlayer = 'X';
        let isGameActive = true;
        const statusElement = document.getElementById('status');

        function createBoard() {
            const boardElement = document.getElementById('gameBoard');
            boardElement.innerHTML = '';
            board = Array(9).fill(null);

            for (let i = 0; i < 9; i++) {
                const cell = document.createElement('div');
                cell.className = 'cell';
                cell.dataset.index = i;
                cell.addEventListener('click', handleCellClick);
                boardElement.appendChild(cell);
            }
        }

        function handleCellClick(e) {
            const index = e.target.dataset.index;

            if (!isGameActive || board[index]) return;

            board[index] = currentPlayer;
            e.target.textContent = currentPlayer;

            if (checkWin()) {
                statusElement.textContent = `Player ${currentPlayer} wins!`;
                isGameActive = false;
                return;
            }

            if (board.every(cell => cell)) {
                statusElement.textContent = "It's a draw!";
                isGameActive = false;
                return;
            }

            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            statusElement.textContent = `Current player: ${currentPlayer}`;
        }

        function checkWin() {
            const winPatterns = [
                [0,1,2], [3,4,5], [6,7,8], // rows
                [0,3,6], [1,4,7], [2,5,8], // columns
                [0,4,8], [2,4,6]           // diagonals
            ];

            return winPatterns.some(pattern => {
                const [a, b, c] = pattern;
                return board[a] && board[a] === board[b] && board[a] === board[c];
            });
        }

        function resetGame() {
            currentPlayer = 'X';
            isGameActive = true;
            statusElement.textContent = `Current player: ${currentPlayer}`;
            createBoard();
        }

        createBoard();
    </script>
</body>
</html>